<!-- 关于我们 -->
<template>
  <div class="abb-page">
    <div class="display-flex">
      <div class="flex-1">
        <img
          src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
        />
      </div>
      <div>
        <n-button type="primary" size="medium" @click="addCase">保存</n-button>
      </div>
    </div>
    <n-input
      type="text"
      placeholder="请输入页面的名称"
      size="medium"
      clearable
      v-model:value="form.title"
    ></n-input>

    <div class="mt60 text-context" :style="{ height: xqHeight }">
      <div class="fz32 z9 cen pt40 jjhjsewerrw" @click="isshowxq = true">
        点击编辑详情！
      </div>
      <template v-for="(item, idx) in xqDataList" :key="idx">
        <span
          v-if="item.typeid == 0"
          :style="fontStle(item)"
          class="conhgbeertww"
          >{{ item.val }}</span
        >
        <textarea
          v-if="item.typeid == 1"
          :value="item.val"
          class="conhgbeertww"
          :style="fontStle(item)"
        ></textarea>
        <div
          class="conhgbeertww"
          v-if="item.typeid == 2"
          :style="ImgStle(item)"
        >
          <img :src="item.imgUrl" :style="ImgStle(item)" v-if="item.imgUrl" />
          <div
            v-else
            class="w100 h100 fz22 ov z9 vertical-center editor-img-Box"
          >
            {{ item.w }}*{{ item.h }}
          </div>
        </div>
        <div
          v-if="item.typeid == 3"
          class="conhgbeertww"
          :style="ImgStle(item)"
        >
          <n-carousel v-if="item.imgUrlList">
            <img
              class="w100 h100"
              :src="imger"
              v-for="(imger, id) in item.imgUrlList"
              :style="Imgbanner(item)"
            />
          </n-carousel>
          <div
            v-else
            class="w100 h100 fz22 ov z9 vertical-center editor-img-Box"
          >
            {{ item.w }}*{{ item.h }}
          </div>
        </div>
      </template>
    </div>

    <editor
      v-if="isshowxq"
      @close="isshowxq = false"
      @successFun="getxqData"
      :initData="xqDataList"
    ></editor>
  </div>
</template>
 <script lang='ts' setup>
import { ref } from "vue";
import photoGallery from "../../../../components/util/photoGallery";
import editor from "../../../public/editor.vue";
import {
  fontStle,
  ImgStle,
  callBack,
  Imgbanner,
  dxpost,
  qurl,
  dxget,
} from "../../../../util/index";
const form = ref({
  title: "",
  details: "",
});

const props = defineProps({
  id: { type: String },
});

const loading = ref();
const cz = qurl();
const isbj = ref(false); // 是否为编辑的状态
const isshowxq = ref(false); //是否显示详情
const xqDataList = ref(); // 详情的数据
const xqHeight = ref(); // 详情的高度
const Back = callBack;
// 获取详情数据
const getxqData = (data) => {
  xqDataList.value = data;
  isshowxq.value = false;
  getArrMax();
  form.value.details = JSON.stringify(data);
};
//获取数组中最大的值  方便计算详情的高度
const getArrMax = () => {
  const dsxe = [];
  xqDataList.value.map((a) => {
    dsxe.push(a.y);
  });
  let getMaxy = dsxe.reduce((a, b) => (a > b ? a : b)); //获取最大 的y坐标
  getMaxy += xqDataList.value.filter((a) => a.y == getMaxy)[0].h;
  xqHeight.value = getMaxy + 20 + "px";
};

const addCase = async () => {
  loading.value = true;
  const res = await dxpost("abb/abbeditor", form.value, "PUT");
  loading.value = false;
  window.$message.success("修改成功");
};

const initData = async () => {
  let { data }: any = await dxget("abb/abbeditor", { id: props.id });
  form.value = data;
  xqDataList.value = JSON.parse(data.details);
  getArrMax();
};

initData();
isbj.value = true;
</script>
 <style scoped>
.text-context {
  min-height: 800px;
}
</style>